<template>
  <!-- 切换标签栏 -->
  <view class="tabs_comp">
    <view class="tab_item" :style="calcTabWidth" v-for="(item, index) in tabList" :key="index" @click="switchTab(item, index)">
      <view class="item" :class="currentTabIndex === index ? 'active' : ''">
        <text class="text" :style="calcTextWidth">{{ item.name }}</text>
        <text class="number" v-if="item.number">{{ item.number }}</text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  components: {},
  props: {
    currentTab: {
      // 当前选中下标
      type: Number,
      default: 0
    },
    tabList: {
      // 标签列表
      type: Array,
      default: () => []
    },
    paddingBetween:{
      // 标签组件左右两边边距
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      currentTabIndex: 0,
    };
  },
  computed: {
    calcTabWidth(){
      // 减去0.05防止除不尽的情况
      return `width: ${(100 / this.tabList.length).toFixed(2) - 0.05}%`
    },
    calcTextWidth(){
      return `max-width: ${((750 - this.paddingBetween * 2) / this.tabList.length).toFixed(0)}rpx`
    },
  },
  watch:{
    currentTab(value){
      this.currentTabIndex = value
    }
  },
  created() {
    this.currentTabIndex = this.currentTab
  },
  methods: {
    switchTab(item, index) {
      // if(index !== this.currentTabIndex){
        this.$emit('switchTab', index)
      // }
    },
  }
};
</script>

<style scoped lang="scss">
.tabs_comp {
  // width: 692rpx;
  z-index: 99;
  padding-top: 20rpx;
  // border-bottom: 1px solid #E4E4E4;
  .tab_item {
    display: inline-block;
    text-align: center;
    .item {
      padding-bottom: 20rpx;
      display: inline-block;
      font-size: 24rpx;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #888888;
      line-height: 34rpx;
      .text{
        display: inline-block;
        vertical-align: middle;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      .number {
        margin-left: 8rpx;
        display: inline-block;
        vertical-align: middle;
        height: 32rpx;
        line-height: 32rpx;
        padding: 0 10rpx;
        background: #FF4444;
        border-radius: 18rpx;
        font-size: 21rpx;
        font-family: SourceHanSansCN-Bold, SourceHanSansCN;
        font-weight: bold;
        color: #ffffff;
      }
    }
    .active {
      font-size: 28rpx;
      font-family: PingFangSC-Semibold, PingFang SC;
      font-weight: 600;
      color: #C40000;
      line-height: 40rpx;
      border-bottom: 2px solid #FF4444;
      font-family: SourceHanSansCN-Medium, SourceHanSansCN;
      .number {
        height: 36rpx;
        line-height: 36rpx;
      }
    }
  }
}
</style>
